<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
      <el-form ref="form" class="login-container" :label-position="labelPosition" label-width="80px" :model="form" :rules="rule">
        <h3 class="login-title">系统登录</h3>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" style="margin-left:48px" @click="submit">登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import  Mock from 'mockjs';
import Cookie from 'js-cookie'
import{ getMenu } from '../../api'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'Login',
  data() {
      return {
        labelPosition: 'right',
        form: {
          username: '',
          password: ''
        },
        rule:{
         username:[{ required:true,trigger:'blur',message:'请输入用户名'}] ,
         password:[{required:true,trigger:'blur',message:'请输入密码'}]
        }
      };
    },
    methods:{
      submit(){
        //token信息
        // const token= Mock.Random.guid()
        //form 表单的校验通过
        this.$refs.form.validate((valid)=>{
          if(valid){
            getMenu(this.form).then(({data})=>{
              console.log(data)
              if(data.code===200){
                Cookie.set('token',data.data.token)
                console.log(data.data.token)
                // 获取菜单数据存入store
                
                this.$store.commit('setMeun',data.data.menu)

                console.log(this.$router)
                this.$store.commit('addMeun',this.$router)

                this.$router.push('/home')
              }else{
                this.$message.error(data.data.message);
              }
            })
          }
        })
        
        //将token存入cookie
        // Cookie.set('token',token)
      }
    }

}
</script>

<style lang="less" scoped>
.login-container {
 
  width: 400px;
  margin: 180px auto; 
  border: 1px solid #eaeaea;
  padding: 35px 15px 35px 15px;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow:0 0 25px #cac6c6;
  box-sizing: border-box;
  .login-title{
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    color: #505458;
  }

}
</style>e